<template>
  <div class="container">
    <el-drawer class="manage-drawer" title="活动管理" :modal="false" :visible.sync="managedrawer"
               @opened="opens"
               direction="rtl">
      <div class="time-line">
        <div style="margin-bottom: 1rem; opacity: 0.7">活动状态</div>
        <el-timeline :reverse="true">
          <el-timeline-item
              type="primary"
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <div style="position:absolute; right: 12rem; top: 4rem">
        <el-input placeholder="请输入要添加的成员" v-model="searchname" style="width: 100%;">
          <el-button slot="append" icon="el-icon-circle-plus-outline" @click="toSearch"></el-button>
        </el-input>
      </div>
      <div style="position:absolute; right: 2rem; top: 4rem">
        <el-button type="danger" round @click="deleteActivity">
          删除活动
        </el-button>
      </div>
      <el-divider></el-divider>
      <div ref="cityEcharts" style="width: 100%; height: 350px;">

      </div>
      <el-divider></el-divider>
      <div class="manage-user">
        <el-card class="box-card">
          <h4 style="text-align: center; margin-bottom: 1rem">成员管理</h4>
          <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
            <li v-for="item in $store.state.newactivityjoiner" :key="item.id">
              <div class="infinite-list-item">
                <el-avatar :src="$store.state.publicStaticPath + item.avatar"></el-avatar>
                <span style="margin-left: 3rem; width: 9rem">{{ item.nick_name }}</span>
                <el-button type="danger" @click="deleteUser(item.user_name)" round>删除该成员</el-button>
              </div>
              <el-divider></el-divider>
            </li>
          </ul>
        </el-card>
      </div>
    </el-drawer>
    <div class="allheader">
      <h5>参 加 志 愿 活 动</h5>
      <h6>为志愿事业付出自己的一份力！</h6>
      <el-button v-if="$store.state.userInfo.isManagement" @click="openmanage" icon="el-icon-edit" type="primary"
                 style="position: absolute; right: 0; top: 4.5rem;">
        管理活动
      </el-button>
    </div>
    <div class="centercard">
      <div class="center-card">
        <div class="top-img"><img :src="$store.state.publicStaticPath + $store.state.activeActivity.activity_cover"/>
        </div>
        <div class="other">
          <div class="center-text">
            <!-- <div class="top-tiao"><el-progress :text-inside="true" :stroke-width="15" :percentage=Math.floor(($store.state.newactivity[index].activity_participator_num/$store.state.newactivity[index].activity_people_max_num)*100) status="warning"></el-progress></div> -->
            <el-progress :text-inside="true" :stroke-width="24"
                         :percentage="percent($store.state.activeActivity.activity_participator_num, $store.state.activeActivity.activity_people_max_num)"
                         :format="format"
            ></el-progress>
            <div class="center-shuzi">
              <div class="shuzi-left">
                <span>已报名人数:</span>
                <p>{{ $store.state.activeActivity.activity_participator_num }}</p>
              </div>
              <div class="shuzi-right">
                <span>需求人数:</span>
                <p>{{ $store.state.activeActivity.activity_people_max_num }}</p>
              </div>
            </div>
          </div>
          <div class="buttom-text">
            <h3>{{ $store.state.activeActivity.activity_name }}</h3>
            <div>
              <div class="input">
                <i class="el-icon-time"></i>
                <span>{{ $store.state.activeActivity.activity_begin_time.slice(0, 10) }}</span>
                <span>-</span>
                <span>{{ $store.state.activeActivity.activity_end_time.slice(0, 10) }}</span>
              </div>
              <div class="input">
                <i class="el-icon-location-outline"></i>
                <span>{{ $store.state.activeActivity.activity_province }}</span>
                <span>{{ $store.state.activeActivity.activity_city }}</span>
                <span>{{ $store.state.activeActivity.activity_district }}</span>
                <div>
                  <i class="el-icon-place"></i>
                  <span>{{ $store.state.activeActivity.activity_address }}</span>
                </div>
              </div>
              <!-- 							<div class="input">
                <i class="el-icon-edit"></i>
                <span>{{ $store.state.newactivity[index].team }}</span>
              </div> -->
              <div class="input">
                <i class="el-icon-s-custom"></i>
                <span>{{ $store.state.newactivityjoiner[0].real_name }}</span>
              </div>
              <div class="input">
                <i class="el-icon-mobile-phone"></i>
                <span>{{ $store.state.activeActivity.activity_initiator_phone }}</span>
              </div>
              <div class="input">
                <el-tag effect="dark">{{ $store.state.activeActivity.activity_tag }}</el-tag>
              </div>
            </div>
            <div v-if="$store.state.islog" class="waibutton">
              <div v-if="$store.state.activeActivity.activity_status === '2'">
                <div v-if="isJoined">
                  <el-button type="success" round class="button" @click="drawer = true">
                    退出
                    <el-drawer
                        title="申请信息"
                        :visible.sync="drawer"
                        :direction="'btt'"
                        size="80%"
                        :before-close="handleClose"
                    >
                      <div class="qiantaocenter">

                        <el-card shadow="hover">
                          <el-form label-position="left" label-width="80px" :model="uploadData"
                                   style="display: flex; flex-direction: column;
                                   justify-content: space-around;">
                            <el-form-item label="申请人">
                              {{ $store.state.userInfo.nickName }}
                            </el-form-item>
                            <el-form-item label="活动发起人">
                              {{ $store.state.newactivityjoiner[0].real_name }}
                            </el-form-item>
                            <el-form-item label="退出理由">
                              <el-input style="width: 30%" type="textarea"
                                        v-model="uploadData.message_content"></el-input>
                            </el-form-item>
                            <el-form-item label="活动类型">退出活动消息审核</el-form-item>
                            <el-form-item label="是否有附件">
                              <el-select v-model="uploadData.is_null" placeholder="请选择是否有附件">
                                <el-option label="是" :value="false">
                                  <div>
                                    <!--                            <el-button class="buttonstyle" @click="innerDrawer = true">是</el-button>-->
                                    <el-link type="primary" class="buttonstyle" @click="innerDrawer = true">是</el-link>
                                    <el-drawer
                                        title="上传附件"
                                        :append-to-body="true"
                                        :direction="'btt'"
                                        :visible.sync="innerDrawer"
                                        :before-close="handleClose"
                                    >
                                      <div class="innerdrawer">
                                        <el-upload
                                            class="upload-demo"
                                            ref="upload"
                                            action="#"
                                            :on-preview="handlePreview"
                                            :file-list="fileList"
                                            :auto-upload="false"
                                            :http-request="uploadHttpRequest"
                                            :before-upload="beforeAvatarUpload"
                                            :on-change="onChangeFile"
                                            :on-remove="onRemoveFile"
                                            :multiple="true"
                                        >
                                          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                          <div slot="tip" class="el-upload__tip">上传文件大小不超过20mb</div>
                                        </el-upload>
                                      </div>
                                    </el-drawer>
                                  </div>
                                </el-option>
                                <el-option label="否" :value="true">
                                  <el-link class="buttonstyle">否</el-link>
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-form>
                        </el-card>

                      </div>
                      <el-button type="primary" @click="submitUpload('2')">提交退出申请信息</el-button>
                    </el-drawer>
                  </el-button>
                </div>
                <div v-else>
                  <el-button type="success" round class="button" @click="drawer = true">
                    参加({{ $store.state.activeActivity.activity_participator_num }})
                    <el-drawer
                        title="报名信息"
                        :visible.sync="drawer"
                        :direction="'btt'"
                        size="80%"
                        :before-close="handleClose"
                    >
                      <div class="qiantaocenter">

                        <el-card shadow="hover">
                          <el-form label-position="left" label-width="80px" :model="uploadData"
                                   style="display: flex; flex-direction: column;
                                   justify-content: space-around;">
                            <el-form-item label="申请人">
                              {{ $store.state.userInfo.nickName }}
                            </el-form-item>
                            <el-form-item label="活动发起人">
                              {{ $store.state.newactivityjoiner[0].real_name }}
                            </el-form-item>
                            <el-form-item label="申请理由">
                              <el-input style="width: 30%" type="textarea"
                                        v-model="uploadData.message_content"></el-input>
                            </el-form-item>
                            <el-form-item label="活动类型">参加活动消息审核</el-form-item>
                            <el-form-item label="是否有附件">
                              <el-select v-model="uploadData.is_null" placeholder="请选择是否有附件">
                                <el-option label="是" :value="false">
                                  <div>
                                    <!--                            <el-button class="buttonstyle" @click="innerDrawer = true">是</el-button>-->
                                    <el-link type="primary" class="buttonstyle" @click="innerDrawer = true">是</el-link>
                                    <el-drawer
                                        title="上传附件"
                                        :append-to-body="true"
                                        :direction="'btt'"
                                        :visible.sync="innerDrawer"
                                        :before-close="handleClose"
                                    >
                                      <div class="innerdrawer">
                                        <el-upload
                                            class="upload-demo"
                                            ref="upload"
                                            action="#"
                                            :on-preview="handlePreview"
                                            :file-list="fileList"
                                            :auto-upload="false"
                                            :http-request="uploadHttpRequest"
                                            :before-upload="beforeAvatarUpload"
                                            :on-change="onChangeFile"
                                            :on-remove="onRemoveFile"
                                            :multiple="true"
                                        >
                                          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                          <div slot="tip" class="el-upload__tip">上传文件大小不超过20mb</div>
                                        </el-upload>
                                      </div>
                                    </el-drawer>
                                  </div>
                                </el-option>
                                <el-option label="否" :value="true">
                                  <el-link class="buttonstyle">否</el-link>
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-form>
                        </el-card>

                      </div>
                      <el-button type="primary" @click="submitUpload('0')">提交申请信息</el-button>
                    </el-drawer>
                  </el-button>
                </div>
              </div>
              <div v-if="$store.state.activeActivity.activity_status === '3'">
                <div v-if="isJoined">
                  <el-button type="success" round class="button" @click="drawer = true">
                    退出
                    <el-drawer
                        title="申请信息"
                        :visible.sync="drawer"
                        :direction="'btt'"
                        size="80%"
                        :before-close="handleClose"
                    >
                      <div class="qiantaocenter">

                        <el-card shadow="hover">
                          <el-form label-position="left" label-width="80px" :model="uploadData"
                                   style="display: flex; flex-direction: column;
                                   justify-content: space-around;">
                            <el-form-item label="申请人">
                              {{ $store.state.userInfo.nickName }}
                            </el-form-item>
                            <el-form-item label="活动发起人">
                              {{ $store.state.newactivityjoiner[0].real_name }}
                            </el-form-item>
                            <el-form-item label="退出理由">
                              <el-input style="width: 30%" type="textarea"
                                        v-model="uploadData.message_content"></el-input>
                            </el-form-item>
                            <el-form-item label="活动类型">退出活动消息审核</el-form-item>
                            <el-form-item label="是否有附件">
                              <el-select v-model="uploadData.is_null" placeholder="请选择是否有附件">
                                <el-option label="是" :value="false">
                                  <div>
                                    <!--                            <el-button class="buttonstyle" @click="innerDrawer = true">是</el-button>-->
                                    <el-link type="primary" class="buttonstyle" @click="innerDrawer = true">是</el-link>
                                    <el-drawer
                                        title="上传附件"
                                        :append-to-body="true"
                                        :direction="'btt'"
                                        :visible.sync="innerDrawer"
                                        :before-close="handleClose"
                                    >
                                      <div class="innerdrawer">
                                        <el-upload
                                            class="upload-demo"
                                            ref="upload"
                                            action="#"
                                            :on-preview="handlePreview"
                                            :file-list="fileList"
                                            :auto-upload="false"
                                            :http-request="uploadHttpRequest"
                                            :before-upload="beforeAvatarUpload"
                                            :on-change="onChangeFile"
                                            :on-remove="onRemoveFile"
                                            :multiple="true"
                                        >
                                          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                          <div slot="tip" class="el-upload__tip">上传文件大小不超过20mb</div>
                                        </el-upload>
                                      </div>
                                    </el-drawer>
                                  </div>
                                </el-option>
                                <el-option label="否" :value="true">
                                  <el-link class="buttonstyle">否</el-link>
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-form>
                        </el-card>

                      </div>
                      <el-button type="primary" @click="submitUpload('2')">提交退出申请信息</el-button>
                    </el-drawer>
                  </el-button>
                </div>
                <div v-else>
                  <el-button type="success" round disabled class="button">
                    进行中
                  </el-button>
                </div>
              </div>
              <div v-if="$store.state.activeActivity.activity_status === '4'">
                <el-button type="danger" round disabled class="button">
                  已结束
                </el-button>
              </div>
              <!--              <el-button type="primary" round class="button" @click="addshare()">-->
              <!--                分享({{ newactivity.activity_people_max_num }})-->
              <!--              </el-button>-->
              <div v-if="isCollected">
                <el-button type="warning" round class="button" @click="canclecollect()">
                  取消收藏
                </el-button>
              </div>
              <div v-else>
                <el-button type="warning" round class="button" @click="addcollect()">
                  收藏({{ $store.state.activeActivity.activity_collected_num }})
                </el-button>
              </div>
              <t-button @click="toComment" theme="primary" shape="round" class="button">
                <icon name="edit-1"/>
                评论
              </t-button>
            </div>
            <div v-else class="waibutton">

            </div>
            <el-dialog title="评价一下该活动吧！" :visible.sync="dialogFormVisible">
              <el-rate
                  v-model="activityScore"
                  show-text
                  allow-half
              >
              </el-rate>
              <el-input v-model="comment" placeholder="留下你想说的话吧！" clearable>
              </el-input>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendComment">确 定</el-button>
              </div>
            </el-dialog>

          </div>
        </div>
      </div>
      <div class="news-news">
        <ul class="probootstrap-news">
          <li>
            <h3>活动详情</h3>
            <div class="line"></div>
            <div class="jieshaotext">
              <h2>{{ $store.state.activeActivity.activity_name }}</h2>
              <p>{{ $store.state.activeActivity.activity_detail }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 定义图表外层容器 -->
    <div ref="homeEcharts"
         style="width: 15%; height: 350px; position: absolute; left: 3rem; top: 12rem;">
    </div>
    <div ref="ageEcharts"
         style="width: 15%; height: 350px; position: absolute; left: 3rem; top: 32rem;">
    </div>
    <div class="comment" v-if="$store.state.newactivitycomments.length">
      <t-comment
          v-for="(item,index) in $store.state.newactivitycomments"
          :key="item.id"
          :avatar="$store.state.publicStaticPath + item.comment_sender_avatar"
          :author="item.comment_sender_nickname"
          :datetime="item.comment_create_time"
          :content="item.comment_text"
      >
        <template #actions>
          <span v-if="item.isliked" key="thumbUp" @click="nolike(item.id, index)">
            <icon style="color: red;" name="thumb-up"/>
            <span style="color: red;" class="action-text">{{ item.comment_like }}</span>
          </span>
          <span v-else key="thumbUp" @click="like(item.id, index)">
            <icon name="thumb-up"/>
            <span class="action-text">{{ item.comment_like }}</span>
          </span>
          <span key="chat" v-if="$store.state.userInfo.isManagement" @click="deleteComment(item.id)">
            <icon name="close-circle-filled"/>
            <span class="action-text">删除</span>
          </span>
        </template>
      </t-comment>

    </div>


  </div>
</template>

<script>
import {request} from '../api/axios.js';
import axios from "axios";
import {Icon} from 'tdesign-icons-vue';

export default {
  name: 'activitydetail',
  components: {
    Icon,
  },
  computed: {
    percent() {
      return function (nownum, need) {
        return nownum / need * 100
      }
    }
  },
  methods: {
    nolike(id, index) {
      this.$store.state.newactivitycomments[index].isliked = false
      this.$store.state.newactivitycomments[index].comment_like--

      request({
        url: '/v1/activities/canclelikecomment',
        method: 'post',
        data: {
          comment_id: id
        }
      }).then();
    },
    like(id, index) {
      this.$store.state.newactivitycomments[index].isliked = true
      this.$store.state.newactivitycomments[index].comment_like++

      request({
        url: '/v1/activities/likecomment',
        method: 'post',
        data: {
          comment_id: id
        }
      }).then();
    },
    deleteComment(id) {
      request({
        url: '/v1/activities/deletecomment',
        method: 'post',
        data: {
          comment_id: id
        }
      }).then(() =>{
        this.$store.dispatch('toActivityDetail', this.$store.state.activeActivity.id);
      });
    },
    toComment() {
      this.dialogFormVisible = true
    },
    sendComment() {
      this.dialogFormVisible = false

      request({
        url: '/v1/activities/sendcomment',
        method: 'post',
        data: {
          isChild: false,
          userName: this.$store.state.userInfo.userName,
          comment_text: this.comment,
          score: this.activityScore * 20,
          id: this.$store.state.activeActivity.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert('评价成功！')
          this.$store.dispatch('toActivityDetail', this.$store.state.activeActivity.id);
        }
      });
    },
    // 打开管理页面
    openmanage() {
      this.managedrawer = true;
    },
    // 调用城市分布图
    opens() {
      this.cityChart();
    },
    // 绘制图表
    dataChart() {
      let echarts = require('echarts');
      //初始化图表，this.$refs.homeEcharts获取到图表容器
      let myChart = echarts.init(this.$refs.homeEcharts)

      let boyNum = 0;
      let girlNum = 0;
      let elseNum = 0;
      for (let i of this.$store.state.newactivityjoiner) {
        if (i.sex === '男') {
          boyNum++
        } else if (i.sex === '女') {
          girlNum++
        } else {
          elseNum++
        }
      }
      // 初始化配置（官网实例详情左侧代码，直接复制过来按项目需求修改即可）
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        title: {
          text: '已参加人员性别比例',
          x: 'center'
        },
        series: [
          {
            name: '人数',
            type: 'pie',
            radius: ['100%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: girlNum, name: '女生'},
              {value: boyNum, name: '男生'},
              {value: elseNum, name: '未知'}
            ]
          }
        ]
      };

      myChart.setOption(option);
    },
    // 绘制图表
    ageChart() {
      let echarts = require('echarts');
      //初始化图表，this.$refs.homeEcharts获取到图表容器
      let myChart = echarts.init(this.$refs.ageEcharts)

      let age1 = 0;
      let age2 = 0;
      let age3 = 0;
      for (let i of this.$store.state.newactivityjoiner) {
        if (i.age < 18) {
          age1++
        } else if (i.age > 28) {
          age3++
        } else {
          age2++
        }
      }
      let option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['年龄段', '18岁以下', '18-28岁', '28以上'],
            ['年龄分布情况', age1, age2, age3]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
      };

      myChart.setOption(option);
    },
    // 城市分布图定义
    cityChart() {
      let echarts = require('echarts');
      //初始化图表，this.$refs.homeEcharts获取到图表容器
      let myChart = echarts.init(this.$refs.cityEcharts)

      let option = {
        title: {
          text: '志愿者所在学校分布',
          x: 'top'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.1]
        },
        yAxis: {
          type: 'category',
          data: [this.list[0].title, this.list[1].title, this.list[2].title, this.list[3].title, this.list[4].title]
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            data: [this.list[0].num, this.list[1].num, this.list[2].num, this.list[3].num, this.list[4].num]
          }
        ]
      };

      myChart.setOption(option);
    },
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    },
    submitUpload(type) {
      this.uploadHttpRequest(type);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 获取活动详情
    getactivitydetail() {

      setTimeout(() => {
        if (this.$store.state.newactivitycollecter.findIndex(
            item => item.user_name === this.$store.state.userInfo.userName
        ) >= 0) {
          this.isCollected = true
        }
        if (this.$store.state.newactivityjoiner.findIndex(
            item => item.user_name === this.$store.state.userInfo.userName
        ) >= 0) {
          this.isJoined = true
        }
      }, 200)
    },
    // 上传函数
    uploadHttpRequest(type) {
      this.uploadData.sender = this.$store.state.userInfo.userName;
      this.uploadData.receiver = this.$store.state.activeActivity.activity_initiator_id;
      this.uploadData.join_activity_id = this.$store.state.activeActivity.id;
      this.uploadData.message_title = this.$store.state.activeActivity.activity_name + '申请消息';
      this.uploadData.message_type = type
      console.log(this.uploadData);
      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加

      for (let i of this.upFileList) {
        formData.append('file', i); //添加文件对象
      }
      formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式

      // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/messages/sendactivitymessage'; //上传地址
      let uploadUrl = 'http://localhost:8000/v1/messages/sendactivitymessage';

      let headers = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }
      axios.post(uploadUrl, formData, headers).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          // this.$store.state.userInfo.avatar = res.data.avatar
          alert('提交报名信息成功！');
        }
      });
    },
    // 上传之前的判断
    beforeAvatarUpload(file) {
      const isLt20M = file.size / 1024 / 1024 < 20;

      if (!isLt20M) {
        this.$message.error('上传文件大小不能超过 20MB!');
      }
      return isLt20M;
    },
    // 删除活动
    deleteActivity() {
      this.$confirm('确定要删除吗？请慎重考虑！！！')
          .then(() => {
            request({
              url: '/v1/activities/delactivity',
              method: 'post',
              data: {
                id: this.$store.state.activeActivity.id
              }
            }).then(res => {
              if (res.data.code === 200) {
                alert('删除成功！');
                this.$router.replace('/activity')
              } else {
                alert(res.data.error);
                return;
              }
            });
          })
    },
    // 添加成员
    toSearch() {
      request({
        url: '/v1/activities/joinactivity',
        method: 'post',
        data: {
          userName: this.searchname,
          id: this.$store.state.activeActivity.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert('添加成功！');
          this.$store.dispatch('toActivityDetail', this.$store.state.activeActivity.id);
          this.$store.state.activeActivity.activity_participator_num++;
        } else {
          alert(res.data.error);
          return;
        }
      });
    },
    // 改变文件时
    onChangeFile(file, fileList) {
      this.upFileList = []
      for (let x of fileList) {
        if (x.raw) {
          this.upFileList.push(x.raw)
        }
      }
    },
    // 移除文件
    onRemoveFile(file, fileList) {
      this.upFileList = []
      for (let x of fileList) {
        if (x.raw) {
          this.upFileList.push(x.raw)
        }
      }
    },
    addshare() {

    },
    // 删除成员
    deleteUser(user_name) {
      request({
        url: '/v1/activities/exitactivity',
        method: 'post',
        data: {
          userName: user_name,
          id: this.$store.state.activeActivity.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert('删除成功！');
          this.$store.dispatch('toActivityDetail', this.$store.state.activeActivity.id);
          this.$store.state.activeActivity.activity_participator_num--;
        } else {
          alert(res.data.error);
          return;
        }
      });
    },
    handleClose(done) {
      this.$confirm('还有未保存的工作哦，确定关闭吗？')
          .then(() => {
            done();
          })
    },
    // 收藏活动
    addcollect() {
      request({
        url: '/v1/activities/collectactivity',
        method: 'post',
        data: {
          userName: this.$store.state.userInfo.userName,
          id: this.$store.state.activeActivity.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert(res.data.success);
          this.isCollected = true
          this.$store.state.activeActivity.activity_collected_num++;
        } else {
          alert(res.data.error)
        }
      });
    },
    // 取消收藏
    canclecollect() {
      request({
        url: '/v1/activities/canclecollectactivity',
        method: 'post',
        data: {
          userName: this.$store.state.userInfo.userName,
          id: this.$store.state.activeActivity.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert(res.data.success);
          this.isCollected = false
          this.$store.state.activeActivity.activity_collected_num--;
        } else {
          alert(res.data.error)
        }
      });
    }
  },
  beforeCreate() {
    setTimeout(() => {
    }, 500);
  },
  created() {
    setTimeout(() => {
      //先根据所有的title组合成一个数组
      let titleList = []
      this.$store.state.newactivityjoiner.forEach((item) => {
        titleList.push(item.user_school)
      })
      titleList = titleList.sort()

      let myObj = titleList.reduce(function (prev, next) {
        prev[next] = (prev[next] + 1) || 1;
        return prev;
      }, {})

      let winningList = []
      for (let i in myObj) {
        let obj = {
          title: i,
          num: myObj[i]
        }
        winningList.push(obj)
      }

      function sortBy(props) {
        return function (a, b) {
          return a[props] - b[props];
        }
      }

      this.list.push(...winningList)
      this.list = this.list.sort(sortBy("num"))
      this.list = this.list.reverse()
    }, 200)
    this.getactivitydetail();
  },
  mounted() {
    // 调用当前图表
    setTimeout(() => {
      this.dataChart();
      this.ageChart();
      this.$store.state.newactivitycomments.map(item =>{
        item.isliked = false
      })
      if (this.$store.state.activeActivity.activity_status === '4') {
        this.activities = [{
          content: '活动结束',
          timestamp: this.$store.state.activeActivity.activity_end_time
        }, {
          content: '活动按期开始',
          timestamp: this.$store.state.activeActivity.activity_begin_time
        }, {
          content: '通过审核',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }, {
          content: '创建成功',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }]
      }
      if (this.$store.state.activeActivity.activity_status === '3') {
        this.activities = [{
          content: '活动中...',
          timestamp: new Date().getFullYear() + '-' + new Date().getMonth() + 1 + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
        }, {
          content: '活动按期开始',
          timestamp: this.$store.state.activeActivity.activity_begin_time
        }, {
          content: '通过审核',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }, {
          content: '创建成功',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }]
      }
      if (this.$store.state.activeActivity.activity_status === '2') {
        this.activities = [{
          content: '报名中...',
          timestamp: new Date().getFullYear() + '-' + new Date().getMonth() + 1 + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
        }, {
          content: '通过审核',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }, {
          content: '创建成功',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }]
      }
      if (this.$store.state.activeActivity.activity_status === '1') {
        this.activities = [{
          content: '审核不通过',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }, {
          content: '创建成功',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }]
      }
      if (this.$store.state.activeActivity.activity_status === '0') {
        this.activities = [{
          content: '待审核...',
          timestamp: new Date().getFullYear() + '-' + new Date().getMonth() + 1 + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
        }, {
          content: '创建成功',
          timestamp: this.$store.state.activeActivity.activity_create_time
        }]
      }
    }, 200)

  },
  destroyed() {
    this.$store.state.newactivityjoiner = []
    this.$store.state.activeActivity = {}
    this.$store.state.newactivitycollecter = []
    this.$store.state.newactivitycomments = []
  },
  data() {
    return {
      comment: '',
      activityScore: 0,
      dialogFormVisible: false,
      list: [
        {
          title: '西安理工大学',
          num: 0
        },
        {
          title: '西安建筑科技大学',
          num: 0
        },
        {
          title: '西安医学院',
          num: 0
        },
        {
          title: '西安交通大学',
          num: 0
        },
        {
          title: '西安电子科技大学',
          num: 0
        }
      ],
      searchname: '',
      activities: [],
      // 是否收藏
      isCollected: false,
      // 是否参加
      isJoined: false,
      index: 0,
      managedrawer: false,
      drawer: false,
      innerDrawer: false,
      numberValidateForm: {
        age: ''
      },
      fileList: [],
      upFileList: [],
      uploadData: {
        sender: '',
        receiver: '',
        message_type: '',
        message_content: '',
        message_title: '',
        is_null: true,
        join_activity_id: '',
      },
      newactivity: {
        // imgurl:'http://8.136.157.194:8000/media/',
        activity_address: '',
        activity_begin_time: '',
        activity_city: '',
        activity_cover: '',
        activity_create_time: '',
        activity_detail: '',
        activity_district: '',
        activity_end_time: '',
        activity_initiator_id: 0,
        activity_initiator_phone: '',
        activity_name: '',
        activity_participator_num: 0,
        activity_collected_num: 0,
        activity_people_max_num: 0,
        activity_province: '',
        activity_status: '',
        activity_tag: '',
        id: 0
      }
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.allheader {
  width: 100%;
  height: 8rem;
  background-image: linear-gradient(to right, cornflowerblue, lightgreen);
  background-size: cover;
  font-size: 3rem;
  color: black;
  opacity: 0.7;
  padding-left: 3rem;
  padding-top: 1rem;
}

.center {
  margin: 2rem 0 2rem 10rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
  width: 100%;
  display: flex;
  flex-wrap: wrap;

}

.center .center-left {
  margin-left: 4rem;
}

.center-card {
  width: 16rem;
}

.top-img {
}

.top-img img {
  margin-left: 0rem;
  width: 100%;
}

.other {
  width: 16rem;
  margin: auto;
}

.center-shuzi {
  display: flex;
  justify-content: space-between;
}

.shuzi-left span {
  font-size: 12px;
  color: #b3b2b2;
}

.shuzi-left p {
  font-size: 24px;
  color: #01c632;
}

.shuzi-right span {
  font-size: 12px;
  color: #b3b2b2;
}

.shuzi-right p {
  font-size: 24px;
  color: #01c632;
}

.buttom-text {
  margin: 0.5rem 0 0 0;
}

.input {
  opacity: 0.5;
  margin: 0.5rem 0 0.5rem 0;
}

.input span {
  padding-left: 1rem;
}

.jieshaotext {
  color: #637381;
  line-height: 26px;
  font-size: 16px;
  font-weight: 300;
  font-family: Lato, Arial, sans-serif;
  margin-bottom: 1rem;
}

.biaoyu {
  margin: 2rem 0 2rem 0;
  text-align: center;
}

.news-news {
  text-align: left;
  width: 35rem;
  margin-right: 2rem;
  display: flex;
  margin: 0rem 1rem 0 3rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.news-img img {
  width: 16rem;
  height: 16rem;
}

.probootstrap-news {
  width: 60rem;
  margin-right: 2rem;
  display: flex;
}

.probootstrap-news li {
  list-style: none;
  display: block;
}

.probootstrap-news li p {
  list-style: none;

  line-height: 30px;
  font-size: 16px;
  font-weight: 300;
  font-family: Lato, Arial, sans-serif;
}

.probootstrap-news li {
  text-decoration: none;
  transition: 0.3s all;
}

.probootstrap-news li .probootstrap-date {
  color: #ccc;
  text-transform: uppercase;
}

.buttom-text .news-routerlink {
  text-decoration: none;
  color: white;
}

.line {
  border: solid 0.01rem;
  background-color: #637381;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.waibutton {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button {
  display: flex;
  justify-content: center;
  width: 17rem;
  margin: 5px 0;
}

.qiantaocenter {

}

.colum-form {
  display: flex;
  flex-direction: column;
}

.buttonstyle {
  width: 100%;
}

.comment {
  width: 80%;
}

.action-text {
  display: inline-block;
  margin-left: 6px;
  line-height: 15px;
}

.author-icon {
  display: inline-block;
  margin: 0 4px;
}


.manage-drawer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.time-line {
  margin-top: 3rem;
  padding-left: 1rem;
}

.manage-user {
  margin-bottom: 2rem;
}

.infinite-list {
  height: 350px;
}

.infinite-list-item {
  display: flex;
  align-items: center;

}
</style>
